<template>
  <ul
    :style="{maxHeight:maxHeight+'px'}"
    class="list-container flex"
  >
    <li
      class="flex flex-between flex-v-center"
      v-for="(item,index) in myData"
      :key='index'
      :class="(item.coin==currentId||item.coin==currentId)?'color-danger':'color-blamk'"
      @click='onClick(item)'
    >
      <div class="currency flex flex-v-center">
        <!-- <img
          v-if='item.icon||item.logo'
          :src="item.icon||item.logo"
          class="thumb-20"
          alt=""
        > -->
        <span
          class="font-bold font-18 "
          v-html="item.coin||item.coin+'&nbsp;/&nbsp;'+item.coin"
        ></span>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  name: "c2c-aside-comp",
  props: {
    myData: null,
    maxHeight: String,
    showArrow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showIcon: true,
      currentId: "USDT"
    };
  },
  methods: {
    onClick(item) {
      this.currentId = item.coin;
      console.log(item);
      
      this.$emit("onListClick", item);
    }
  },
  watch: {
    myData() {
      if (this.myData.length > 0 && Array.isArray(this.myData)) {
        this.currentId =this.myData[0].coin;
        // this.currentId =
        //   (this.myData[0] && this.myData[0].coin) || this.myData[0].coin;
      }
      this.showIcon = this.showArrow;
    }
  }
};
</script>

<style lang="scss" scoped>
.currency {
  margin-right: 11px;
}

.list-container {
  // border-bottom: 1px solid $bd-color;
  height: 40px;
  overflow-y: auto;
  li {
    @include textVcenter;
    padding: 0 10px;
    transition: all 0.4s;
    cursor: pointer;
    &:hover {
      background-color: #d6d5d4;
    }
  }
  img {
    width: 26px;
    height: 26px;
    display: inline-block;
    margin-right: 5px;
  }
}
</style>
